<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-family: "Hong";
    }

    .title {
        background-color: black;
        background-image: url(./images/zhuye3.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        filter: blur(1px);
        width: 100%;
        height: 100vh;
        text-align: center;

    }

    @font-face {
        font-family: "Hong";
        src: url("images/HongLeiXingShuJianTi-2.otf");
    }

    .titleText {
        position: absolute;
        top: calc(50% - 75px);
        left: calc(50% - 675px);
        font-size: 150px;
        color: white;
        /* font-family: "Hong"; */
    }

    .character {
        background-color: black;
        width: 100%;
        height: 914px;
        position: relative;
    }

    .t1 {
        text-align: center;
        font-size: 100px;
        color: white;
        position: absolute;
        left: 15%;
        top: 10%;
    }

    .circle {
        width: 900px;
        height: 900px;
        position: absolute;
        left: 40%;
        border-radius: 50%;
    }

    .character-img img {
        width: 60%;
        height: 60%;
        border-radius: 50%;
        border-style: solid;
        position: absolute;
        left: calc(20% - 10px);
        top: calc(20% + 58px);

    }

    .change-btn {
        position: absolute;
    }

    .miniFace {
        border-radius: 50%;
        border-style: solid;
        background: white;
        width: 100%;
        height: 100%;
    }

    #money {
        width: 10%;
        height: 10%;
        left: 75%;
        top: 7%;
    }

    #monkey {
        width: 15%;
        height: 15%;

        left: 85%;
        top: 25%;
    }

    #witch {
        width: 15%;
        height: 15%;
        left: 90%;
        top: 45%;
    }

    #assassin {
        width: 15%;
        height: 15%;
        left: 82%;
        top: 65%;
    }

    #hunter {
        width: 15%;
        height: 15%;
        left: 66%;
        bottom: 3%;
    }

    .character-info {
        color: gray;
        width: 250px;
        position: absolute;
        left: 25%;
        top: 60%;
        font-size: 24px;
        line-height: 100px;
    }

    .character-name {
        position: absolute;
        left: 15%;
        top: 40%;
    }

    .character-name img {
        width: 150px;
        height: 300px;
    }

    .cv .speak {
        width: 21px;
        height: 28px;
        position: absolute;
        top: 75%;
        left: 20%;
    }

    .more {
        color: white;
        text-decoration: none;
        text-align: center;
        font-size: 30px;
        line-height: 50px;
        position: absolute;
        bottom: 5%;
        right: 5%;
    }

    .more:hover {
        color: gray;
    }

    .copy {
        padding-bottom: 50px;
        background: black;
        font-size: 50px;
        text-align: center;
        line-height: 300px;
        color: white;
    }

    .copy>a {
        display: block;
        width: 80%;
        height: 500px;
        margin: 20px 10%;
        animation: asmall 0.5s;
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .copy>a:hover {
        animation: abig 0.5s;
        background-size: auto 130%;
    }

    @keyframes abig {
        0% {
            background-size: auto 100%;
        }

        100% {
            background-size: auto 130%;
        }
    }

    @keyframes asmall {
        0% {
            background-size: auto 130%;
        }

        100% {
            background-size: auto 100%;
        }
    }
</style>

<body>

    <div class="box">
        <!-- 封面 -->
        <div class="title"></div>
        <div class="titleText"><span>我在</span><span>惊</span><span>悚游戏里</span><span>封</span><span>神</span></div>
        <!-- 人物简介 -->
        <div class="character">
            <div class="t1">人物简介</div>
            <!-- 圆圈盒子（定位用） -->
            <div class="circle"
                style="background: url(https://dream.res.netease.com/pc/zt/20220909161108/img/minghsi-bg_2a43c545.webp) no-repeat center / 100%;background-position-y: 66px;">
                <!-- 人物图片 -->
                <div class="character-img">
                    <img src="./images/c066cc9c89d0dbdd4e6bdfd8e616340.jpg" alt="" id="face">
                </div>
                <!-- 切换人物 -->
                <div class="changer-btns">

                </div>
            </div>
            <!-- 角色信息 -->
            <div class="character-info">
                <p id="info">流浪马戏团团长</p>
            </div>
            <!-- 名字 -->
            <div class="character-name">
                <img src="./images/p1.png" alt="" id="name">
            </div>
            <!-- 配音 -->
            <div class="cv">
                <div class="speak"
                    style="background: url(https://dream.res.netease.com/pc/zt/20220909161108/img/speaker-head_feed95c8.webp) no-repeat;">
                </div>
                <audio src=""></audio>
            </div>
            <a class="more" href="./character.html">更多>></a>
        </div>
        <!-- 副本简介 -->
        <div class="copy">
            <h1>副本</h1>
            <a href="./page1.html" class="one" style="background-image: url(./images/copy1.jpg); "></a>
            <a href="./page2.html" class="two" style="background-image: url(./images/copy2.jpg); "></a>
            <a href="./page3.html" class="three" style="background-image: url(./images/copy3.jpg); "></a>
            <a href="#" class="four" style="background-image: url(./images/copy4.jpg); "></a>
            <a href="#" class="five" style="background-image: url(./images/copy5.jpg); "></a>
            <a href="#" class="six" style="background-image: url(./images/copy6.jpg); "></a>
            <a href="#" class="seven" style="background-image: url(./images/copy7.jpg); "></a>
            <a href="#" class="eight" style="background-image: url(./images/copy8.jpg); "></a>
            <a href="#" class="nine" style="background-image: url(./images/copy9.jpg);"></a>
            <a href="#" class="ten" style="background-image: url(./images/copy10.jpg);"></a>
            <a href="#" class="eleven" style="background-image: url(./images/copy11.jpg);"></a>
            <a href="#" class="twelve" style="background-image: url(./images/copy12.jpg);"></a>
        </div>
    </div>

</body>
<script>

    function $(selector) {
        return document.querySelector(selector)
    }

    //人物简介轮播图，切换人物效果
    function crtCharacter(describe, nameImg, faceImg) {
        return { describe, nameImg, faceImg }
    }
    //单例模式
    function manager() {
        let currentCharacter = -1 // -1 没有选中
        let characters = []
        function init() {
            fill()
            pushFaces()
            currentCharacter = 0
        }
        function changeCurrent(newCurrent) {
            currentCharacter = newCurrent
            change()
        }
        function fill() {
            characters.push(crtCharacter("贫穷的流浪汉", "./images/p1.png", "./images/c066cc9c89d0dbdd4e6bdfd8e616340.jpg"))
            characters.push(crtCharacter("交通工具与猴", "./images/p4.png", "./images/e535d415ec6f9db9ecc31aabc12e5ce.jpg"))
            characters.push(crtCharacter("小女巫", "./images/p3.png", "./images/b8de005e28eaec9ff252fe616d8fcdd.jpg"))
            characters.push(crtCharacter("懦弱的刺客", "./images/p2.png", "./images/2b8f057c9bd830028be7ce76e3abc74.jpg"))
            characters.push(crtCharacter("二代猎人", "./images/p5.png", "./images/df1df0e7950d8c15d3971dd8f2027f4.jpg"))
        }
        function pushFaces() {
            for (let i = 0; i < characters.length; i++) {
                let changeBtnDiv = document.createElement("div")
                changeBtnDiv.className = "change-btn c" + (2 - i) / 6
                changeBtnDiv.onclick = () => changeCurrent(i)
                let right = 50 * (1 - Math.cos(((2 - i) / 10) * Math.PI))
                let top = 50 * (1 - Math.sin(((2 - i) / 10) * Math.PI))
                changeBtnDiv.style.cssText = `top:${top}%;right:${right}%;width:10%`   //04   13  2${(8 - (Math.abs((2 - i)) + 3)) * 3}
                let changeBtnImg = document.createElement("img")
                changeBtnImg.className = "miniFace"
                changeBtnImg.src = characters[i].faceImg
                changeBtnDiv.appendChild(changeBtnImg)
                $(".changer-btns").appendChild(changeBtnDiv)
            }

        }
        function change() {
            $("#face").src = characters[currentCharacter].faceImg
            $("#info").innerHTML = characters[currentCharacter].describe//怎么变了
            $("#name").src = characters[currentCharacter].nameImg


        }
        return { init, changeCurrent, fill }
    }
    let m = new manager()
    m.init()

    //整屏翻页效果
    let scrollTop = document.documentElement.scrollTop
    var winHeight = window.innerHeight; // 获取当前窗体的高度(显示的高度)
    let flag = false;
    let timer = null
    checkScrollTop()
    document.body.addEventListener("mousewheel", (e) => {
        console.log(e, flag, scrollTop)
        checkScrollTop()
        crTtimer()
        let trueTop = ~~scrollTop.toFixed(0)
        if (flag) {
            if (trueTop == 0 && trueTop < 913) {
                e.deltaY < 0 ? null : ciliu(winHeight)
                console.log(1)
                return
            }
            if (trueTop >= 913 && trueTop < 913 * 2) {
                e.deltaY < 0 ? ciliu(0) : ciliu(winHeight * 2)
                console.log(2)
                return
            }
            if (trueTop >= 913 * 2 && trueTop < 913 * 2 + 100) {
                e.deltaY < 0 ? ciliu(winHeight) : null
                console.log(3)
                return
            }
        }

    })
    window.addEventListener("scroll", () => { scrollTop = document.documentElement.scrollTop })
    function ciliu(top) {
        document.documentElement.scrollTo({
            top,
            behavior: "smooth"
        })
    }
    function checkScrollTop() {
        if (~~scrollTop.toFixed(0) < 913 * 2) {
            document.body.style.overflowY = "hidden"
        } else {
            document.body.style.overflowY = "auto"
        }
    }
    function crTtimer() {
        flag = true
        if (timer) return
        timer = setTimeout(() => {
            flag = false
            clearTimeout(timer)
            timer = null
        }, 1)
    }
</script>

</html>